<!-- 评价弹框） -->
<template>
    <div style="padding: 0">
        <van-row class="title">
            <van-col span="24" class="font-3 padding-tb">您的评价对我们很重要</van-col>
        </van-row>
        <van-row class="title">
            <van-col span="24" class="text-align-c padding-tb">
                <van-rate v-model="rank" :size="20" :count="5" color="#D84F4D" void-color="#D84F4D"/>
            </van-col>
        </van-row>
        <div class="in pb0">
            <p class="desc"><textarea v-model="content" class="color-9" placeholder="对本次服务的感觉如何，请您描述一下" @keyup="checkContent"></textarea></p>
        </div>
        <!-- 评论标签字典表数据展示 -->
        <div class="in pb0 nth-child2 clearfix">
            <span v-for="(val,index) in commentArr" :key="index" @click="selectComments(index,val.id)" :class="[val.class==true ? 'commentSelected' : '']">{{val.name}}</span>            
        </div>
        <van-row class="option clearfix"> 
          <van-col span="12"><p class="color-9" @click="listentoClosePopup()">让我想想</p></van-col>
          <van-col span="12"><p class="color-default" @click="submitEvent()">确定</p></van-col>
        </van-row>
    </div>
</template>
<script>
    import apiHttp from '../../api/index'
    import { Rate } from 'vant';
     import { Toast } from 'vant';
    export default {
     props:["orderId","goodsId"],
      data(){
        return {
            content:"",
            rank: 0,
            groupCode:"user_tags",
            commentArr:[],
            tags:[]
        };
      },
      components: {
        
      },
      created(){
          this.getCommentDesc();
      },
      methods:{
          //评价内容验证
          checkContent(){                 
                if(this.content.length>=50){
                    this.content = this.$str(this.content,0,50);
                }               
          },
        //查询评论标签字典表列表接口
        getCommentDesc(){
            let params = {
                groupCode:this.groupCode
            }            
            apiHttp.orderIndex.commentDesc(this.groupCode,params,resp=>{  
                const arr = [];                                 
                out:while(arr.length!=6){
                    let num = parseInt(Math.random()*resp.length); 
                    for(let i=0;i<arr.length;i++){
                        if(num===arr[i]){
                            continue out;
                        }
                    }
                    arr.push(num);                                             
                    resp[num].class = false;
                    this.commentArr.push(resp[num]);                                       
                }                                                                                                                                             
            })
        },        
        listentoClosePopup() {
            this.$emit('listentoChildEvent');   
        },
        //选取评论标签字典表数据
        selectComments(index,val){
            console.log(index)
            for(var i=0;i<this.tags.length;i++){           
                if(this.tags[i]==val){
                    Toast("不能选重复的");
                    return  
                }
            } 
            if(this.tags.length==3){    
                Toast("最多只能选择3个");                
            }else{
                this.tags.push(this.commentArr[index].id);
                this.commentArr[index].class=true;                              
            } 
                           
        },
        //评论提交
        submitEvent(){           
            let params = {
               orderId: this.orderId,
               goodsId : this.goodsId,
               rank :this.rank,
               content:this.content,
               tags:this.tags
            }
            apiHttp.orderIndex.addComment(params,resp=>{             
                if(resp.code==200){  
                    Toast("评论成功！");
                    this.$router.back(-1);   
                }else{
                    Toast(resp.message);
                }
            })
            this.$emit('listentoChildEvent');
        }
      }

    }
</script>
<style scoped>
.commentSelected{
    background-color: #E55F5E !important;
    color: #fff !important;
}
.padding-tb{
    padding: 0.4rem 0;
}
.yw-popup .title:nth-child(1) {
    padding: 0.3rem;
    border-bottom: 0.01rem solid rgb(233, 231, 231);
    margin-bottom: 0.2rem;
    color: #666;
    font-size: 0.30rem;
}
.in .desc textarea {
    width: 90%;
    min-height: 4rem;
    border: 0;
    resize: none;
    background: #eee;
    border-radius: 0.3rem;
    padding: 0.3rem 4%;
}
.in {
  padding: 0.2rem 0.35rem;
}
.in.nth-child2 {
    padding-left: 0.5rem;
    border-bottom: 0.01rem solid rgb(233, 231, 231);
}
.in.nth-child2 span {
    min-width: 22%;
    display: inline-block;
    margin: 0 3% 0.2rem 0;
    padding: 0.1rem 0.4rem;
    background: #fff;
    border-radius: 1rem;
    border: 0.04rem solid rgb(233, 231, 231);
    color: #666;
    font-size: 0.46rem;
    margin-right: .3rem;
}
.option {
    padding: 0.1rem 0;
}
.option .van-col.color-9 {
    border-right: 0.01rem solid rgb(233, 231, 231);
}
.option .van-col {
    font-size: 0.65rem;
}
.option .van-col>p {
    padding: 0.4rem 0;
}
</style>